<template>
  <!-- 项目列表(基础数据/库房信息 | 施工汇报/进度汇报 ) -->
  <c-dialog ref="dialog" :dialog="dialog" spaceAuto @confirm="$emit('confirm', list)"
    @open="initOpen" :footerNe="footerNe">
    <slot>
      <el-row class="left-tree" v-if="treeConf" :style="treeConf.style">
        <h4 class="header"><svg-icon icon-class="c_list" v-if="isIcon" /> {{ treeConf.title }}</h4>
        <div class="body">
          <el-scrollbar style="height:100%">
            <c-tree :treeData="treeData" :isLeaf="isLeaf" :lazy="treeConf.lazy"
              v-bind="treeConf.bind"
              @node-click="butHandle({id: 'nodeClick',value:arguments[0]})" />
          </el-scrollbar>
        </div>
      </el-row>
      <el-row v-if="dialog.isOpen&&tableData" :tree="!!treeConf" :style="tStyle">
        <jz-table ref="table" :tableData="tableData" :headList="tableHead"
          :searchData="searchConf" :selection="isMult" :tableConf="tableConf"
          :pageConf="page" @pageChange="pageChange(1)" @sortChange="sortChange">
          <!-- 允许自定义列表内元素 key -->
          <template v-for="item in tableHead" #[item.prop]="{row, column, $index}">
            <slot :name="item.prop" :row="row" :column="column" :$index="$index"></slot>
          </template>
        </jz-table>
      </el-row>
    </slot>
    <slot name="append"></slot>
  </c-dialog>
</template>
<script>
export default {
  name: 'cProList',
  props: {
    isMult: Boolean, // 是否启用多选
    footerNe: Boolean, // 是否需要末尾按钮
    dialog: Object, // 弹窗参数
    tableHead: {
      type: Array,
      default: () => {
        return [
          { label: '项目编号', prop: 'projectno', sortable: 'custom' },
          { label: '项目名称', prop: 'projectname', sortable: 'custom', hide: true },
          { label: '操作员', prop: 'username', sortable: 'custom' },
          { label: '操作日期', prop: 'operdt', sortable: 'custom' }
        ]
      }
    },
    currKey: String, // 要高亮key
    currValue: [String, Number], // 要高亮的值
    tStyle: String, // table 外层样式
    http: Object, // 获取数据-远程方法
    option: Object, // 额外参数
    fuName: { // 方法名
      type: String,
      default: 'getPageList'
    },
    treeConf: Object // 树配置
  },
  data() {
    return {
      tableData: [], tableConf: {}, searchConf: {},
      page: {}, params: {}, list: null,
      treeData: [], currNode: null
    }
  },
  computed: {
    isLeaf() { // 加载-子key
      const { treeConf } = this
      if (treeConf && treeConf.isLeaf) {
        return treeConf.isLeaf
      }
      return 'load_on_demand'
    },
    isIcon() {
      const { treeConf } = this
      if (treeConf && treeConf.icon != null) {
        return treeConf.icon
      }
      return true
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    initOpen() {
      if (this.http) {
        this.params = {}
        this.getPageList()
        this.treeConf && this.getDeptList()
        this.treeConf && (this.tableConf.height = 300)
      }
    },
    // 请求-获取列表
    async getPageList() {
      const { currKey: key, currValue: value } = this
      const params = this.$commUtil.getPageParams(this.page)
      Object.assign(params, this.params)
      // 额外参数
      this.option && Object.assign(params, this.option)
      const res = await this.http[this.fuName](params)
      if (res) {
        this.tableData = res.rows || []
        this.page.total = res.records
      }
      // 有数据-高亮
      const bool = key && value && this.tableData && this.tableData.length
      if (bool) {
        const currRow = this.tableData.find(o => o[key] == value)
        if (currRow) { // 高亮-选中
          this.$refs.table.setSelection(1, currRow)
        }
      }
    },
    // 请求-组织机构
    getDeptList() {
      const http = this.treeConf.http
      const fuName = this.treeConf.fuName
      if (http && fuName) {
        const id = this.currNode && this.currNode.id
        const params = { node: id, _: new Date().getTime() }
        // 额外参数
        this.option && Object.assign(params, this.option)
        http[fuName](params)
          .then(res => {
            if (res) {
              const resbool = typeof res == 'string'
              let data = resbool ? JSON.parse(res) : Object.assign([], res)
              data = this.treeToData(data) // 转换需要的字段
              if (id) {
                this.currNode.show = true
                this.$set(this.currNode, 'children', data) // 更新视
              } else {
                this.treeData = data
              }
            }
          })
      }
    },
    // 分页-回调
    pageChange(type) {
      switch (type) {
        case 1: // 分页
          this.getPageList()
          break
        case 'refresh': // 刷新
          this.params = { }
          this.getPageList()
          break
      }
    },
    // 功能区-回调
    butHandle(row) {
      switch (row.id) {
        case 'search': // 单-搜索
          this.page.curPage = 1
          this.page.limit = 10
          Object.assign(this.params, { searchKey: row.value })
          this.getPageList()
          break
        case 'oneSelete': // 单选-change回调
          if (this.isMult) {
            this.$refs.table.setSelection(2, row.value)
          } else {
            this.list = row.value
            this.$emit('tableChange', row.value)
          }
          break
        case 'multSelete': { // 多选-change回调
          this.list = row.value
          this.$emit('tableChange', row.value)
          break
        }
        case 'nodeClick': { // tree-node点击回调
          const { row: data, type } = row.value
          this.currNode = data
          if (type == 'node') { // 节点点击 icon是展开
            this.params = { FID: data.id }
            this.getPageList()
          }
          if (type == 'icon') { // 展开
            const bool = !!data[this.isLeaf] // 是否有子节点
            // 无子节点-加载
            if (bool && !(data.children && data.children.length)) {
              this.getDeptList()
            }
          }
          break
        }
      }
    },
    // 排序-自定义回调
    sortChange({ column, prop, order }) {
      this.params.sidx = order ? prop : ''
      this.params.sord = order ? order.slice(0, -6) : ''
      this.getPageList()
    },
    // 确认 - 回调
    confirm() {
      // this.$emit('confirm', this.list)
    },
    // table - 初始化配置
    initTable() {
      // 弹窗-列表-分页-配置
      this.page = {
        open: true, limit: 10, total: 0, curPage: 1,
        otherHandle: this.pageChange, show: 2 // 只要刷新按钮
      }
      // table-配置
      this.tableConf = {
        stripe: true, maxHeight: '300',
        selectionChange: v => this.butHandle({ id: 'multSelete', value: v }),
        currentChange: v => this.butHandle({ id: 'oneSelete', value: v })
      }
      // 弹窗-功能区-单-搜索配置
      this.searchConf = {
        id: 'search', style: 'width: 100%;float: unset;', callback: this.butHandle
      }
      // dialog - 弹窗配置
      const dialog = { isOpen: false, modalClose: false, title: '' }
      this.$commUtil.copyObj(this.dialog, dialog)
    },
    // 数据转换
    treeToData(list) {
      const nodeId = this.treeConf.id
      const nodeName = this.treeConf.name
      let res = list
      if (list && list.length) {
        const b1 = list[0].hasOwnProperty('id')
        const b2 = list[0].hasOwnProperty('name')
        if (!b1 && nodeId) {
          res = res.map(o => { o.id = o[nodeId]; return o })
        }
        if (!b2 && nodeName) {
          res = res.map(o => { o.name = o[nodeName]; return o })
        }
      }
      return res
    }
  },
  filters: {

  }
}
</script>
<style lang="scss" scoped>
// left-树
  .left-tree{
    width: 200px;
    display: inline-block;
    background-color: #EBEDF1;
    .header{
      width: 100%;
      height: 50px;
      padding-left: 30px;
      background-color: #D9DFE5;
      line-height: 50px;
      color: #333;
      font-size: 14px;
      margin-top: 0;
      margin-bottom: 15px;
    }
    .body{
      padding: 0 5px;
      height: 309px;
      ::v-deep .el-scrollbar__wrap{
        overflow-x: auto;
      }
    }
  }
  // 列表
  div[tree]{
    width: calc( 100% - 205px);
    margin-left: 5px;
    display: inline-block;
    vertical-align: top;
  }
</style>
